<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>八角放大</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#box {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 200px;
				left: 400px;
				cursor: nw-resize;
			}


		</style>
	</head>
	<body>

		<div id="box"></div>
		
	</body>
</html>
<script>
	
	// 获取元素
	var boxDiv = document.getElementById('box');

	boxDiv.onmousedown = function(e) {

		var startX = e.clientX;
		var startY = e.clientY;

		var position = {
			left: e.clientX - boxDiv.offsetLeft,
			right: boxDiv.offsetLeft + boxDiv.offsetWidth - e.clientX,
			top: e.clientY - boxDiv.offsetTop,
			bottom: boxDiv.offsetTop + boxDiv.offsetHeight - e.clientY
		};

		// console.log(position);
		var r = (position.left > 0 && position.left <= 20) || (position.right > 0 && position.right <= 20) || (position.top > 0 && position.top <= 20) || (position.bottom > 0 && position.bottom <= 20);
		// console.log(r);
		if (!r) return;

		// alert(111);

		document.onmousemove = function(e) {
			var x = startX - e.clientX;
			var y = startY - e.clientY;
			if (position.left <= 20) {
				
				boxDiv.style.width = boxDiv.offsetWidth + x + 'px';
				boxDiv.style.left = boxDiv.offsetLeft - x + 'px';

			}

			if (position.top <= 20) {
				boxDiv.style.height = boxDiv.offsetHeight + y + 'px';
				boxDiv.style.top = boxDiv.offsetTop - y + 'px';
			}

			if (position.right <= 20) {
				boxDiv.style.width = boxDiv.offsetWidth - x + 'px';
			}

			if (position.bottom <= 20) {
				boxDiv.style.height = boxDiv.offsetHeight - y + 'px';
			}



			startX = e.clientX;
			startY = e.clientY;

		};

		document.onmouseup = function() {
			document.onmousemove = null;
		};



	};









</script>



